import { injectable } from "inversify";
import { BaseGuiService } from "../base_class/BaseGuiService";
import { FormulaService } from "./FormulaService";
import { CONFIG_NAMES } from "../inversify/CONFIG_NAMES";
import GUI from "lil-gui";
import { myContainer } from "../inversify/inversify.config";

@injectable()
export class GuiService extends BaseGuiService {
  private formulaService: FormulaService;

  constructor() {
    super();
    this.formulaService = myContainer.get(FormulaService);
  }
  private folder_calc!: GUI;
  private folder_def!: GUI;
  private folder_func!: GUI;

  private obj: any = {
    calc_res: "等待计算",
    calc_calc: () => {
      console.log("现在计算");
      const element = document.getElementById(
        this.config.get(CONFIG_NAMES.CALCULATE_STRING_DIV_ID)
      ) as HTMLTextAreaElement;
      if (!element) {
        console.error(
          `没有找到元素 id=${CONFIG_NAMES.CALCULATE_STRING_DIV_ID}`
        );
        return;
      }
      const str = element.value;
      const res = this.formulaService.calculate(str);
      console.log(res);
      if (typeof res === "object") {
        this.obj.calc_res = res?.value.toString();
        alert(res?.message);
      } else {
        this.obj.calc_res = res.toString();
        alert(this.obj.calc_res);
      }
      this.refresh();
    },

    def_name: "name_of_your_variable",
    def_def: () => {
      const v = prompt("请输入变量值");

      this.formulaService.addExpression(this.obj.def_name, "=" + v);
      this.refresh();
    },
    def_list: () => {
      const name_expressions = this.formulaService.listNamedExpression();
      name_expressions.forEach((name_expression) => {
        console.log(`${name_expression.name} ${name_expression.expression}`);
      });
      // console.log(names);
      alert(name_expressions.join("\n"));
    },
    def_del: () => {
      this.formulaService.removeExpression(this.obj.def_name);
    },

    func_list: () => {
      const names = this.formulaService.listFunctionNames();
      console.log(names);
      alert(`控制台输出全部函数名:\n ${names.join(" ")}`);
    },
  };

  private refresh() {
    if (this.folder_calc) {
      this.folder_calc.destroy();
    }
    if (this.folder_def) {
      this.folder_def.destroy();
    }
    if (this.folder_func) {
      this.folder_func.destroy();
    }
    this.folder_calc = this.gui.addFolder("计算");
    this.folder_calc.add(this.obj, "calc_res").name("计算结果").disable();
    this.folder_calc.add(this.obj, "calc_calc").name("计算!");
    this.folder_def = this.gui.addFolder("定义");
    this.folder_def.add(this.obj, "def_name").name("变量名");
    this.folder_def.add(this.obj, "def_def").name("定义!");
    this.folder_def.add(this.obj, "def_list").name("列出变量列表");
    this.folder_def.add(this.obj, "def_del").name("删除此变量名");
    this.folder_func = this.gui.addFolder("函数");
    this.folder_func.add(this.obj, "func_list").name("列出函数列表!");
  }

  start(): Promise<void> {
    this.refresh();
    return Promise.resolve();
  }
  show(): void {
    this.gui.show();
  }
  hide(): void {
    this.gui.hide();
  }
}
